<template >
    <div style="padding: 30px;font-size: 30px;">
        <span class="time" id="time" >
            今天是：<span class="date">{{ nowTime }}</span>
            <span class="hour" style="margin-left: 5px;">{{time.hour}}</span>
            <a class="split">:</a>
            <span class="minitus">{{time.minitus}}</span>
            <a class="split">:</a>
            <span class="seconds">{{time.seconds}}</span>
            <el-link icon="el-icon-edit" style="margin-left: 10px" @click="changeTime">修改时间</el-link>
            <el-dialog
                title="修改时间"
                :visible.sync="dialogVisible"
                width="30%"
                @close="cancelTime">
              <el-form>
                  <el-form-item label="时间">
                      <el-date-picker
                          v-model="newTime.datetime"
                          type="datetime"
                          placeholder="选择日期时间">
                      </el-date-picker>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="cancelTime">取消</el-button>
                  <el-button type="primary" @click="saveTime">保存</el-button>
              </span>
          </el-dialog>
        </span>
    </div>
</template>

<script>
    export default {
        name: "DateUtils",
        props: ["s"],
        data() {
            return {
                time: {
                    hour: "",
                    minitus: "",
                    seconds: ""
                },
                nowTime: "",
                week: [
                    "星期天",
                    "星期一",
                    "星期二",
                    "星期三",
                    "星期四",
                    "星期五",
                    "星期六"
                ],
                dialogVisible: false, // 控制对话框的显示
                newTime: { // 用户输入的新时间
                  datetime: ''
                },
                timerId: null, // 用于存储定时器 ID
            };
        },
        mounted() {
            this.dateTime();
            this.startTimer();
            // 如果 Vuex store 中有用户选择的时间，则初始化时使用它
            if (this.$store.getters.getUserSelectedTime) {
              this.updateTimeDisplay(this.$store.getters.getUserSelectedTime);
            } else {
              this.timeFormate();
            }
        },
        unmounted() { // Vue 3 中使用 unmounted
            this.clearTimer();
        },
        computed: {
          isChangeTime(){
            return this.$store.getters.getUserSelectedTime;
          },
          userSelectedTime() {
            return this.$store.getters.getUserSelectedTime;
          }
        },
        methods: {
            startTimer() {
              this.clearTimer(); // 确保没有旧的定时器存在
              this.timerId = setTimeout(() => {
                this.dateTime();
              }, 1000 - (new Date().getMilliseconds() % 1000)); // 调整首次执行时间以同步秒级
            },
            clearTimer() {
              if (this.timerId) {
                clearTimeout(this.timerId);
                this.timerId = null;
              }
            },
            changeTime() {
              this.dialogVisible = true; // 显示对话框
            },
            saveTime() {
              const isChangeTime = true
              this.$store.dispatch('updateIsChangeTime',isChangeTime)
              const newDate = new Date(this.newTime.datetime);
              this.$store.dispatch('updateUserSelectedTime', newDate);
              this.updateTimeDisplay(newDate);
              this.dialogVisible = false; // 关闭对话框
            },
            cancelTime() {
              this.dialogVisible = false; // 仅关闭对话框，不保存
            },
            dateTime() {
              if (this.isChangeTime && this.userSelectedTime) {
                  // console.log("修改时间")
                  this.updateTimeDisplay(this.userSelectedTime);
              } else {
                // console.log("未修改")
                this.timeFormate();
              }
              this.startTimer(); // 重新启动定时器
            },
            updateTimeDisplay(date) {
              this.time.hour = this.getIncrease(date.getHours(), 2);
              this.time.minitus = this.getIncrease(date.getMinutes(), 2);
              this.time.seconds = this.getIncrease(date.getSeconds(), 2);
              this.nowTime =
                  this.getIncrease(date.getFullYear(), 4) +
                  "年" +
                  this.getIncrease(date.getMonth() + 1, 2) +
                  "月" +
                  this.getIncrease(date.getDate(), 2) +
                  "日 " +
                  this.week[date.getDay()];
            },
            timeFormate() {
                const newtime = new Date();
                this.time.hour = this.getIncrease(newtime.getHours(), 2);
                this.time.minitus = this.getIncrease(newtime.getMinutes(), 2);
                this.time.seconds = this.getIncrease(newtime.getSeconds(), 2);
                this.nowTime =
                    this.getIncrease(newtime.getFullYear(), 4) +
                    "年" +
                    this.getIncrease(newtime.getMonth() + 1, 2) +
                    "月" +
                    this.getIncrease(newtime.getDate(), 2) +
                    "日 " +
                    this.week[newtime.getDay()];
            },
            getIncrease(num, digit) {
                var increase = "";
                for (var i = 0; i < digit; i++) {
                    increase += "0";
                }
                return (increase + num).slice(-digit);
            }
        }
    }
</script>

<style scoped>
    .txt-data .time {
        font-size: 1rem;
        margin-right: 0.5rem;
    }
    .split {
        animation: shark 1s step-end infinite;
        vertical-align: center;
        margin-left: 2px;
        margin-right: 2px;
    }
    @keyframes shark {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }
</style>